How can you centre text vertically and horizontally inside a box?
Centering Text in a Box Using CSS
There are several ways to center text both vertically and horizontally inside a container. The best method depends on whether the container has a fixed height or uses flexible layout systems like Flexbox or Grid.
- 1
Using Flexbox: Set the container to
display: flex, then usejustify-content: centerfor horizontal alignment andalign-items: centerfor vertical alignment. - 2
Using Grid: Set the container to
display: gridand useplace-items: centerto center content both vertically and horizontally. - 3
Using Positioning: With
position: relativeon the container andposition: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)on the text, you can center it regardless of container size. - 4
Using Line Height: For single-line text in a fixed-height box, set
line-heightequal to the container height to center vertically and usetext-align: centerfor horizontal centering.
These methods allow precise vertical and horizontal centering, whether you have dynamic content, multiple lines of text, or responsive layouts.
- 1
Flexbox and Grid are the most flexible and recommended methods for centering content.
- 2
Absolute positioning works well for fixed-size containers or overlay elements.
- 3
Line-height method is limited to single-line text with a fixed container height.
- 4
Always test centering in responsive scenarios to ensure consistent alignment.